import QtQuick 2.12
import QtQuick.Window 2.12

//DarkSquare{
//    id: root
//    width: 120
//    height: 240
////    Column{
////        id:column
////        anchors.centerIn: parent
////        spacing: 10

////        RedSquare{}
////        GreenSquare{width: 96}
////        BlueSquare{}
////    }

//    Row{
//        id:column
//        anchors.centerIn: parent
//        spacing: 10

//        RedSquare{}
//        GreenSquare{width: 96}
//        BlueSquare{}
//    }
//}

//BrightSquare{
//    id: root
//    width: 400
//    height: 120
//    Row{
//        id:column
//        anchors.centerIn: parent
//        spacing: 10

//        RedSquare{}
//        GreenSquare{width: 96}
//        BlueSquare{}
//    }

//}


//网格布局
//BrightSquare{
//    id: root
//    width: 400
//    height: 150
//    Grid{
//        id:column
//        anchors.centerIn: parent
//        spacing: 20
//        rows: 2;columns: 3

//        RedSquare{}
//        GreenSquare{}
//        BlueSquare{}
//        RedSquare{}
//        GreenSquare{}
//        BlueSquare{}
//    }

//}


//流布局
//BrightSquare{
//    id: root
//    width: 400
//    height: 150

//    Flow{
//        id:column
//        anchors.fill: parent
//        anchors.margins: 20
//        spacing: 20


//        RedSquare{}
//        GreenSquare{}
//        BlueSquare{}
//        RedSquare{}
//        GreenSquare{}
//        BlueSquare{}
//    }

//}


DarkSquare{
    id: root
    width: 252
    height: 252
    //定义一个随机数组
    property var colorArray: ['red','green','blue']     //var=variant

    Grid{//colomn 默认值为4

        anchors.centerIn: parent    //centerIn 居中
        anchors.margins: 8
        spacing: 4



        //column :5
        //循环
        Repeater{

            model: 16
            Rectangle{
                id: rect
                property int colorIndex: Math.floor(Math.random()*3)
                color: root.colorArray[colorIndex]
                width: 56
                height: 56

                Text {
                    anchors.centerIn: parent
                    //拼接cell和定位器下标
                    text: "cell"+rect.Positioner.index
                    color: "white"
                }
            }
        }
    }
 }
